<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>canvas</title>
	</head>
	<body>
		<canvas></canvas>

		<script>
			const cvs = document.querySelector('canvas');
			const ctx = cvs.getContext('2d');

			cvs.width = window.innerWidth;
			cvs.height = window.innerHeight;

			function getRandom(x, y) {
				return Math.floor(Math.random() * (y + 1 - x) + x);
			}

			class Point {
				constructor() {
					this.r = 6;
					this.x = getRandom(this.r, cvs.width - this.r);
					this.y = getRandom(this.r, cvs.height - this.r);
				}

				draw() {
					ctx.beginPath();
					ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
					ctx.fillStyle = '#000';
					ctx.fill();
				}
			}

			class Graph {
				constructor() {
					this.points = new Array(100).fill(0).map(() => new Point());
					this.maxDis = 200;
				}

				draw() {
					for (let i = 0; i < this.points.length; i++) {
						const p1 = this.points[i];
						p1.draw();

						for (let j = i + 1; j < this.points.length; j++) {
							const p2 = this.points[j];
							const d = Math.sqrt(
								(p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2
							);
							if (d > this.maxDis) {
								continue;
							}
							ctx.beginPath();
							ctx.moveTo(p1.x, p1.y);
							ctx.lineTo(p2.x, p2.y);
							ctx.closePath();
							ctx.strokeStyle = `rgba(0,0,0,${
								1 - d / this.maxDis
							})`;
							ctx.stroke();
						}
					}
				}
			}

			const g = new Graph();

			g.draw();
		</script>
	</body>
</html>
